<template>
  <div class="app-container">
    <div class="box-form-top">
      <el-form
        size="small"
        :inline="true"
        label-width="68px"
        ref="searchForm"
        :model="searchForm"
      >
        <el-form-item label="订单号" prop="batchnum" label-width="80px">
          <el-input
            v-model="searchForm.batchnum"
            placeholder="请输入订单号"
            style="width: 150px"
            clearable
            maxlength="10"
          />
        </el-form-item>
        <el-form-item label="卷号" prop="reelnum" label-width="80px">
          <el-input
            v-model="searchForm.reelnum"
            placeholder="请输入卷号"
            style="width: 150px"
            clearable
          />
        </el-form-item>
        <el-form-item label="起始时间" prop="startTime" label-width="80px">
          <el-date-picker
            value-format="timestamp"
            v-model="searchForm.startTime"
            type="datetime"
            placeholder="请选择起始时间"
            align="right"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="终止时间" prop="endTime" label-width="80px">
          <el-date-picker
            value-format="timestamp"
            v-model="searchForm.endTime"
            type="datetime"
            placeholder="请选择终止时间"
            align="right"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            style="margin-left: 50px"
            @click="search"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="searchReset"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="box-form">
      <el-table
        :data="defectData"
        border
        style="width: 100%"
        :header-cell-style="{
          background: '#cfcfcf',
          height: '60px',
          color: '#000000',
        }"
        height="100%"
      >
        <el-table-column type="selection" align="center"> </el-table-column>
        <!-- <el-table-column
          prop="dataId"
          label="序号"
          width="80"
          align="center"
        ></el-table-column> -->
        <!-- <el-table-column prop="id" label="id" width="30" align="center">
        </el-table-column> -->
        <!-- <el-table-column
          prop="defectid"
          label="瑕疵唯一标识"
          width="80"
          align="center"
        >
        </el-table-column> -->
        <el-table-column
          prop="productid"
          label="产品"
          width="120"
          align="center"
        >
        </el-table-column>
        <!-- <el-table-column
          prop="productname"
          label="productname"
          width="50"
          align="center"
        >
        </el-table-column> -->
        <el-table-column
          prop="cameraid"
          label="相机id"
          width="100"
          align="center"
        >
        </el-table-column>
        <!-- <el-table-column
          prop="cameraname"
          label="cameraname"
          width="50"
          align="center"
        >
        </el-table-column> -->
        <el-table-column prop="batchnum" label="订单号" width="100" align="center">
        </el-table-column>
        <el-table-column prop="reelnum" label="卷号" width="50" align="center">
        </el-table-column>
        <el-table-column
          prop="hlength"
          label="标注框高度(毫米)"
          width="100"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="vlength"
          label="标注框宽度(毫米)"
          width="100"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="area"
          label="瑕疵面积(平方毫米)"
          width="100"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="speed"
          label="当前速度"
          width="80"
          align="center"
        >
        </el-table-column>
        <!-- <el-table-column
          prop="averagegrey"
          label="averagegrey"
          width="80"
          align="center"
        >
        </el-table-column> -->
        <el-table-column
          prop="defecparamname"
          label="瑕疵名字"
          width="100"
          align="center"
        >
        </el-table-column>
        <!-- <el-table-column
          prop="defecparamid"
          label="瑕疵名字"
          width="50"
          align="center"
        >
        </el-table-column> -->
        <el-table-column
          prop="defecparamconfidene"
          label="瑕疵置信度"
          width="100"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="date"
          label="瑕疵日期"
          width="100"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.date | timeFilter }}
          </template>
        </el-table-column>
        <!-- <el-table-column
          prop="imagepath"
          label="图片路径"
          width="80"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="imagename"
          label="图片名字"
          width="80"
          align="center"
        >
        </el-table-column> -->
        <el-table-column
          prop="xaxis"
          label="瑕疵x坐标"
          width="80"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="yaxis"
          label="瑕疵y坐标"
          width="80"
          align="center"
        >
        </el-table-column>
        <!-- <el-table-column
          prop="xpixel"
          label="瑕疵像素点x坐标"
          width="80"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="ypixel"
          label="瑕疵像素点y坐标"
          width="80"
          align="center"
        >
        </el-table-column> -->
        <!-- <el-table-column
          prop="wpixel"
          label="标注框宽像素"
          width="80"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="hpixel"
          label="标注框高像素"
          width="80"
          align="center"
        >
        </el-table-column> -->
        <!-- <el-table-column prop="ignore" label="忽略" width="80" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.ignore == 0" type="success">忽略</el-tag>
            <el-tag v-if="scope.row.ignore == 1" type="danger">不忽略</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="eliminate"
          label="剔除"
          width="80"
          align="center"
        >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.eliminate == 1" type="danger">剔除</el-tag>
            <el-tag v-if="scope.row.eliminate == 0" type="success"
              >不剔除</el-tag
            >
          </template>
        </el-table-column> -->

        <el-table-column label="操作" width="100" align="center">
          <template slot-scope="scope">
            <!-- <el-button type="text" size="small">查看</el-button> -->
            <el-button type="text" size="small" @click="deleteModel(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="box-form-bottom">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[20, 40, 60, 80]"
        :page-size="20"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>

    <!-- 查看框 -->
    <!-- <el-dialog
      title="查看/修改"
      :visible.sync="openCheck"
      width="720px"
      append-to-body
    >
      <el-form
        ref="defectDataForm"
        :model="defectDataForm"
        :rules="rules"
        label-width="120px"
      >
        <el-row>
          <el-col :span="12"
            ><el-form-item label="设备编号" prop="EQUIPID">
              <el-input
                :disabled="true"
                v-model="defectDataForm.EQUIPID"
                placeholder="请输入设备编号"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12"
            ><el-form-item label="设备编码" prop="EQUIPCODE">
              <el-input
                :disabled="ableChange == false"
                v-model="defectDataForm.EQUIPCODE"
                placeholder="请输入编码"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12"
            ><el-form-item label="设备名称" prop="EQUIPNAME">
              <el-input
                :disabled="ableChange == false"
                v-model="defectDataForm.EQUIPNAME"
                placeholder="请输入设备名称"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12"
            ><el-form-item label="所属设备组标识" prop="EGROUP">
              <el-input
                :disabled="ableChange == false"
                v-model="defectDataForm.EGROUP"
                placeholder="请输入所属设备组标识"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12"
            ><el-form-item label="设备分类" prop="ETYPE">
              <el-input
                :disabled="ableChange == false"
                v-model="defectDataForm.ETYPE"
                placeholder="请输入设备分类"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12"
            ><el-form-item label="主责任人" prop="MAINTAINOR">
              <el-input
                :disabled="ableChange == false"
                v-model="defectDataForm.MAINTAINOR"
                placeholder="请输入主责任人"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12"
            ><el-form-item label="设备存放地址" prop="PLACE">
              <el-input
                :disabled="ableChange == false"
                v-model="defectDataForm.PLACE"
                placeholder="请输入设备存放地址"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12"
            ><el-form-item label="型号规格" prop="SPEC">
              <el-input
                :disabled="ableChange == false"
                v-model="defectDataForm.SPEC"
                placeholder="请输入型号规格"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12"
            ><el-form-item label="厂家" prop="PRODUCER">
              <el-input
                :disabled="ableChange == false"
                v-model="defectDataForm.PRODUCER"
                placeholder="请输入厂家"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12"
            ><el-form-item label="单价" prop="PRICE">
              <el-input
                :disabled="ableChange == false"
                v-model="defectDataForm.PRICE"
                placeholder="请输入单价"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12"
            ><el-form-item label="购置日期" prop="DTPURCHASE">
              <el-date-picker
                :disabled="ableChange == false"
                v-model="defectDataForm.DTPURCHASE"
                type="datetime"
                placeholder="请输入购置日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12"
            ><el-form-item label="容纳人数" prop="PSNNUM">
              <el-input
                :disabled="ableChange == false"
                v-model="defectDataForm.PSNNUM"
                placeholder="请输入容纳人数"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12"
            ><el-form-item label="状态" prop="EQUIPSTATE">
              <el-select
                :disabled="ableChange == false"
                v-model="defectDataForm.EQUIPSTATE"
                placeholder="请输入状态"
              >
                <el-option
                  v-for="item in stateOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12"
            ><el-form-item label="接收状态" prop="OPSTATE">
              <el-select
                :disabled="ableChange == false"
                v-model="defectDataForm.OPSTATE"
                placeholder="请输入接收状态"
              >
                <el-option
                  v-for="item in opOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitProdForm">确 定</el-button>
        <el-button type="primary" @click="ableChange = !ableChange"
          >可修改状态</el-button
        >
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog> -->
  </div>
</template>

        <script>
import * as api from "./api";
import dayjs from "dayjs";
import * as dateApi from "./date";
import moment from "moment";

export default {
  name: "defectData",
  components: {},
  data() {
    return {
      defectData: [],

      //条件搜索
      searchForm: {
        startTime: "",
        endTime: "",
        batchnum: "",
        reelnum: "",
        page: 1,
        limit: 20,
      },
      isSearch: false,
      //时间选择
      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },

      //分页参数
      currentPage4: 1,
      total: null,
      //getlist请求参数
      param: {
        page: 1,
        limit: 20,
      },
    };
  },
  watch: {},
  methods: {
    reset() {
      this.defectDataForm = {
        ETID: null,
        ETCODE: "",
        ETNAME: "",
      };
    },
    //新增
    addProduction() {
      this.reset();
      this.openAddWC = true;
      this.ableChange = true;
    },
    submitAddProdForm() {
      api.createdefectData(this.defectDataForm).then((res) => {
        this.$message({
          message: "新增成功",
          type: "success",
        });
        this.querydefectData();
        this.openAddWC = false;
      });
    },
    //查看
    openDialog(row) {
      this.defectDataForm = row;
      this.ableChange = false;
      this.openCheck = true;
    },
    submitProdForm() {
      console.log(this.defectDataForm);
      delete this.defectDataForm.update_datetime;
      api.UpdatedefectData(this.defectDataForm).then((res) => {
        this.$message({
          message: "修改成功",
          type: "success",
        });
        this.openCheck = false;
      });
    },
    cancel() {
      this.openCheck = false;
    },
    //删除
    deleteModel(row) {
      console.log(row);
      this.$confirm("此操作将永久删除该设备分类, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          api.DelDefectData(row.dataId).then((res) => {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.querydefectData();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    querydefectData() {
      this.defectData = [];
      // let param = {};
      // this.param.fid__gt=3
      api.defectDataGetList(this.param).then((res) => {
        res.data.data.forEach((element) => {
          // element.date = dayjs(element.date).format('YYYY-MM-DD HH:mm:ss')
          this.defectData.push(element);
        });
        this.total = res.data.total;
      });
    },
    querydefectDataWithOptions() {
      this.defectData = [];
      api.defectDataFilterGetList(this.searchForm).then((res) => {
        console.log(res);
        res.data.data.forEach((element) => {
          this.defectData.push(element);
        });
        this.total = res.data.total;
      });
    },
    //
    search() {
      this.isSearch = true;
      this.querydefectDataWithOptions();
      // console.log(this.searchForm);
    },
    searchReset() {
      this.searchForm = {
        startTime: "",
        endTime: "",
        batchnum: "",
        reelnum: "",
        page: 1,
        limit: 20,
      };
      this.isSearch = false;
      this.querydefectData();
    },
    //分页
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.param.limit = val;
      this.searchForm.limit = val;
      if ((this.isSearch = false)) {
        this.querydefectData();
      } else {
        this.querydefectDataWithOptions();
      }
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.param.page = val;
      this.searchForm.page = val;
      if ((this.isSearch = false)) {
        this.querydefectData();
      } else {
        this.querydefectDataWithOptions();
      }
    },
  },
  filters: {
    timeFilter(val) {
      return moment(val * 1).format("YYYY-MM-DD HH:mm:ss");
    },
  },
  mounted() {
    this.querydefectData();
  },
};
</script>

 <style scoped lang="scss">
.app-container {
  //padding: 20px;
  min-height: 250px;
  padding: 10px 15px 0px 10px;
  margin-right: auto;
  margin-left: auto;
}
.box-form-top {
  height: 6vh;
  text-align: center;
  line-height: 100%;
  align-items: center;
  position: relative;
  border-top: 0;
  margin-bottom: 10px;
  width: 100%;
  background: #fff;
  border-radius: 0;
  padding: 10px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  border: 1px solid #dce3e6;
  border-radius: 4px;
  -webkit-box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
  box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
}
.box-form {
  height: 73vh;
  position: relative;
  border-top: 0;
  margin-bottom: 10px;
  width: 100%;
  background: #fff;
  border-radius: 0;
  padding: 10px;
  display: flex;
  border: 1px solid #dce3e6;
  border-radius: 4px;
  -webkit-box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
  box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
  overflow: auto;

  .form_content {
    .form_content_detail {
      padding: 10px;
      background: #eee;
    }
  }
}

.box-form-bottom {
  position: relative;
  border-top: 0;
  margin-bottom: 15px;
  width: 100%;
  background: #fff;
  border-radius: 0;
  padding: 10px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  border: 1px solid #dce3e6;
  border-radius: 4px;
  -webkit-box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
  box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
}
</style>
